/**
 * 库视图下的设置tab
 */

import React from 'react';
import Nav from '@txdfe/at-nav';
import exceed from 'utils/apimap';
import { Link } from 'utils/router';
import { Tag } from '@teamix/ui';
import utils from 'utils';
import track from 'utils/track';
import TagForFeature from 'components/tagForFeature';
import intl from '../../../../../../../../locale';

const { pathResource } = window.FORCE;

export default class projectSettingsNav extends React.Component {
  constructor(props) {
    super(props);
    const hasClickService = utils.getCachedData('service-setting');
    const hasClickLfs = utils.getCachedData('lfs');
    const hasClickMirror = utils.getCachedData('mirror-setting');
    this.state = {
      hasClickService,
      hasClickLfs,
      mirrorSyncSettings: {},
      hasClickMirror,
    };
  }

  componentDidMount() {
    exceed
      .fetch({
        api: 'project.mirror.settings',
        params: {
          projectId: pathResource.id,
        },
      })
      .then((result) => {
        this.setState({
          mirrorSyncSettings: result,
        });
      });
  }

  onItemClick = () => {
    if (!this.props.isBranchCompleted) {
      this.props.updateBranchStatus &&
        this.props.updateBranchStatus({
          isBranchCompleted: true,
        });
    }
  };

  onCacheClick = (key, stateKey) => {
    utils.setCachedData(key, 'clicked');
    this.setState({
      [stateKey]: true,
    });

    if (key === 'lfs') {
      track({
        action: 'view_lfs',
        page: 'Repo-Settings-LFS',
        type: '',
        control: '',
      });
    }
  };

  render() {
    const { isBranchCompleted } = this.props;
    const {
      hasClickService,
      hasClickLfs,
      hasClickMirror,
      mirrorSyncSettings: { support_mirror_sync },
    } = this.state;

    return (
      <React.Fragment>
        <Nav
          style={{ overflow: 'hidden' }}
          defaultSelectedKey={this.props.defaultActiveKey}
          maxCount={10}
          {...this.props}
        >
          <Nav.Item
            key="settings"
            container={Link}
            containerProps={{
              to: `/${pathResource.fullPath}/settings`,
            }}
            label={intl.get({
              id: 'code-assets.containers.projectSettingsTab.BasicSettings',
              defaultMessage: '基本设置',
            })}
          />

          <Nav.Item
            key="branches"
            container={Link}
            containerProps={{
              to: `/${pathResource.fullPath}/settings/branches`,
              onClick: this.onItemClick,
            }}
            label={
              <div>
                {intl.get({
                  id: 'code-assets.containers.projectSettingsTab.BranchSettings',
                  defaultMessage: '分支设置',
                })}

                {!isBranchCompleted ? (
                  <span style={{ float: 'right', position: 'relative', top: -2 }}>
                    <Tag style={{ margin: 0 }}>
                      {intl.get({
                        id: 'code-assets.containers.projectSettingsTab.Unfinished',
                        defaultMessage: '未完成',
                      })}
                    </Tag>
                  </span>
                ) : null}
              </div>
            }
          />

          <Nav.Item
            key="push_rules"
            container={Link}
            containerProps={{
              to: `/${pathResource.fullPath}/settings/push_rules`,
            }}
            label={intl.get({
              id: 'code-assets.containers.projectSettingsTab.PushRuleSettings',
              defaultMessage: '推送规则设置',
            })}
          />

          <Nav.Item
            key="merge_requests"
            container={Link}
            containerProps={{
              to: `/${pathResource.fullPath}/settings/merge_requests`,
            }}
            label={intl.get({
              id: 'code-assets.containers.projectSettingsTab.MergeRequestSettings',
              defaultMessage: '合并请求设置',
            })}
          />

          <Nav.Item
            key="webhooks"
            container={Link}
            containerProps={{
              to: `/${pathResource.fullPath}/settings/webhooks`,
            }}
            label={'Webhooks'}
          />

          <Nav.Item
            key="deploykeys"
            container={Link}
            containerProps={{
              to: `/${pathResource.fullPath}/settings/deploykeys`,
            }}
            label={intl.get({
              id: 'code-assets.containers.projectSettingsTab.DeploymentKey',
              defaultMessage: '部署密钥',
            })}
          />

          <Nav.Item
            key="services"
            container={Link}
            containerProps={{
              to: `/${pathResource.fullPath}/settings/services`,
              onClick: () => {
                this.onCacheClick('service-setting', 'hasClickService');
              },
            }}
            label={
              <div>
                {intl.get({
                  id: 'code-assets.containers.projectSettingsTab.IntegrationAndService',
                  defaultMessage: '集成与服务',
                })}

                {!hasClickService && (
                  <span style={{ float: 'right', position: 'relative', top: -2 }}>
                    <Tag type="primary" size="small" style={{ margin: 0 }}>
                      NEW
                    </Tag>
                  </span>
                )}
              </div>
            }
          />

          <Nav.Item
            key="lfs"
            container={Link}
            containerProps={{
              to: `/${pathResource.fullPath}/settings/lfs`,
              onClick: () => {
                this.onCacheClick('lfs', 'hasClickLfs');
              },
            }}
            label={
              <div>
                {intl.get({
                  id: 'code-assets.containers.projectSettingsTab.LargeFileStorage',
                  defaultMessage: '大文件存储',
                })}

                {!hasClickLfs && (
                  <span style={{ float: 'right', position: 'relative', top: -2 }}>
                    <Tag type="primary" style={{ margin: 0 }}>
                      NEW
                    </Tag>
                  </span>
                )}
              </div>
            }
          />

          <Nav.Item
            key="back_up"
            container={Link}
            containerProps={{
              to: `/${pathResource.fullPath}/settings/back_up`,
            }}
            label={
              <div>
                {intl.get({
                  id: 'code-assets.containers.projectSettingsTab.VaultBackup',
                  defaultMessage: '仓库备份',
                })}

                <span style={{ float: 'right', position: 'relative', top: -2 }}>
                  <TagForFeature
                    type="primary"
                    style={{ margin: 0 }}
                    tagText="BETA"
                  />
                </span>
              </div>
            }
          />

          {support_mirror_sync && (
            <Nav.Item
              key="mirror_sync"
              container={Link}
              containerProps={{
                to: `/${pathResource.fullPath}/settings/mirror_sync`,
                onClick: () => {
                  this.onCacheClick('mirror-setting', 'hasClickMirror');
                },
              }}
              label={
                <div>
                  {intl.get({
                    id: 'code-assets.containers.projectSettingsTab.WarehouseSynchronization',
                    defaultMessage: '仓库同步',
                  })}{' '}
                  {!hasClickMirror && (
                    <span style={{ float: 'right', position: 'relative', top: -2 }}>
                      <Tag type="primary" style={{ margin: 0 }}>
                        NEW
                      </Tag>
                    </span>
                  )}
                </div>
              }
            />
          )}
        </Nav>
      </React.Fragment>
    );
  }
}
